<template>
  <div class="distribution-wrap">
    <el-dialog :visible.sync="dialogVisibleAPP.show" center>
      <div class="show-name">应用ID：{{ app_id_check }}</div>
      <div class="show-nick">应用名称：{{ app_name_check }}</div>
      <div class="biz_for">
        <div v-if="biz_for == 0" class="red">
          提示：此时业务范围是 [全部允许]，不可以进行设备的添加和删除，只有在[指定范围]才可以。
        </div>
        <div v-else-if="biz_for == -1" class="red">
          提示：此时业务指定范围是[全部禁止]，不可以进行设备的添加和删除，只有在[指定范围]才可以。
        </div>
        <div v-if="biz_for == 1" class="blue">
          提示：此时业务范围是 [指定范围]，可以进行设备的添加和删除。
        </div>
      </div>
      <div class="center">
        <div class="left">
          <AppDistributionLeft
            ref="mychildLeft"
            :biz_for="biz_for"
            :app_id="app_id_check"
          />
        </div>
        <div class="right">
          <AppDistributionRight
            ref="mychildRight"
            :biz_for="biz_for"
            :app_id="app_id_check"
          />
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { getData, postData } from "@/request/http";
import AppDistributionLeft from "./AppDistributionLeft";
import AppDistributionRight from "./AppDistributionRight";
export default {
  name: "audit",
  components: { AppDistributionLeft, AppDistributionRight },
  props: {
    app_id_check: {
      type: String,
      default: "",
    },
    app_name_check: {
      type: String,
      default: "",
    },
    dialogVisibleAPP: {
      type: Object,
      default() {
        return {
          show: false,
        };
      },
    },
  },
  data() {
    return {
      app_id: "",
      app_name: "",
      biz_for: 0, //指定范围，0代表全部允许，-1代表全部禁止，1代表指定范围。0和-1的时候不能有操作按钮。1的时候按钮显示
    };
  },
  watch: {
    app_id_check: {
      handler(newVal) {
        this.$refs.mychildLeft.search(newVal);
        this.$refs.mychildRight.search(newVal);
      },
    },
  },
  mounted() {
    this.getBusinessRangeLabel();
  },
  methods: {
    //业务范围初始
    getBusinessRangeLabel() {
      postData("/adminweb/dev/app/bizfor/list", {
        app_id: this.app_id_check,
      })
        .then((res) => {
          console.log(res);
          // var arr = [];
          if (res.code == 0) {
            let bizfors = res.datas.bizfors;
            console.log(bizfors);
            for (var i = 0; i < bizfors.length; i++) {
              if (bizfors[i].biz_type == 0) {
                if (bizfors[i].biz_for == 0) {
                  this.biz_for = 0;
                  console.log("允许所有");
                } else if (bizfors[i].biz_for == 1) {
                  this.biz_for = 1;
                  console.log("指定范围");
                } else if (bizfors[i].biz_for == -1) {
                  this.biz_for = 0 - 1;
                  console.log("全部禁止");
                }
              }
            }
          } else if (res.code == -56055) {
            return;
          } else {
            this.$message.error(res.code + "，" + res.msg);
          }
        })
        .catch((res) => {
          this.$message.error(res.code + "，" + res.msg);
        });
    },
  },
};
</script>

<style scoped>
.center {
  width: 100%;
  height: 530px;
  /* overflow-y: scroll; */
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}
.show-name {
  height: 30px;
  line-height: 30px;
  font-weight: 600;
  color: #676a6d;
  font-size: 15px;
  display: inline-block;
}
.show-nick {
  margin-left: 50px;
  height: 30px;
  line-height: 30px;
  font-weight: 600;
  color: #676a6d;
  font-size: 15px;
  display: inline-block;
}
.biz_for {
  height: 30px;
  line-height: 30px;
}
.biz_for .red{
color: #ca3f3f;
}
.biz_for .blue{
color: #409eff;
}
.left {
  width: 45%;
  height: 100%;
  border: 1px solid #e6eaf1;
  box-shadow: rgb(0 0 0 / 55%) 0px 2px 10px;
  border-radius: 5px;
  position: relative;
  overflow-x: scroll;
  overflow-y: scroll;
}
.right {
  width: 45%;
  height: 100%;
  border: 1px solid #e6eaf1;
  box-shadow: rgb(0 0 0 / 55%) 0px 2px 10px;
  border-radius: 5px;
  position: relative;
 overflow-x: scroll;
  overflow-y: scroll;
}
.distribution-wrap >>> .el-dialog {
  width: 93%;
}
</style>
